<template>
	<view>
		<u-modal :show="calcShow" :title="calcTitle" :content="calcContent" :showCancelButton="calcCancelBtn"
			@cancel="onCancel" @confirm="onConfirm" :cancel-text="calcCancelText" :confirm-text="calcConfirmText"
			 :zoom="zoom" :negativeTop="calcNegativeTop" @close="onClose">
			 <!-- #ifndef APP-NVUE -->
			
			<view class="slot-content">
				<!-- nvue无法兼容 -->
				<rich-text :nodes="calcContent"></rich-text>
			</view>
			 <!-- #endif -->
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: "cg-modal",
		props: {
			show: {
				default: false,
				type: Boolean
			},
			zoom: {
				default: false,
				type: Boolean
			},
			showCancelButton: {
				default: true,
				type: Boolean
			},
			title: {
				default: '提示',
				type: String
			},
			content: {
				default: '',
				type: String
			},
			cancelText: {
				default: '取消',
				type: String
			},
			confirmText: {
				default: '确认',
				type: String
			},
			negativeTop: {
				default: 0,
				type: String | Number
			}
		},
		computed: {
			calcTitle() {

				if (this.config.title) {
					return this.config.title
				} else {
					console.log('this.title', this.title);
					return this.title
				}
			},
			calcCancelText() {
				if (this.config.hasOwnProperty('cancelText')) {

					return this.config.cancelText
				} else {
					return this.cancelText
				}
			},
			calcConfirmText() {
				if (this.config.hasOwnProperty('confirmText')) {

					return this.config.confirmText
				} else {
					return this.confirmText
				}
			},
			calcNegativeTop() {
				if (this.config.hasOwnProperty('negativeTop')) {

					return this.config.negativeTop
				} else {
					return this.negativeTop
				}
			},
			calcCancelBtn() {

				if (this.config.hasOwnProperty('showCancel')) {

					return this.config.showCancel
				} else {
					return this.showCancelButton
				}
			},
			calcContent() {
				if (this.config.hasOwnProperty('content')) {
					return this.config.content
				} else {
					return this.content
				}
			},
			calcShow() {
				if (this.open !== null) {
					return this.open
				} else {
					return this.show
				}
			}
		},
		// watch: {
		// 	calcShow(e) {
		// 		if (!e) {
		// 			console.log('e', e);
					

		// 		}
		// 	}
		// },
		data() {
			return {
				success: null,
				cancel: null,
				config: {},
				open: null

			};
		},
		methods: {
			onClose() {
				if (this.config.stopClose) {} else {
					// 防止初始化后还未消失有阴影
					setTimeout(() => {
						this.resetConfg()
					}, 300)
				}
			},
			resetConfg() {
				this.open = null;
				this.cancel = null;
				this.success = null;
				this.config = {}
			},
			onCancel() {
				this.$emit('cancel');
				this.open = false;
				if (this.cancel) {
					this.cancel()
				}

			},
			onConfirm() {
				this.$emit('confirm')
				if (this.success) {
					this.success()
				}
				if (this.config.stopClose) {
					// 阻止关闭窗口

				} else {
					// 防止初始化后还未消失有阴影
					this.open = false;
					setTimeout(() => {
						this.resetConfg()
					}, 300)
				}

			},
			openDialog(config) {
				// this.resetConfg()
				this.open = true;
				this.config = config
				this.success = config.success
				this.cancel = config.cancel
			},
			closeDialog() {
				this.open = false;
				// this.resetConfg()
			}
		}
	}
</script>

<style>

</style>